<template>
  <footer>
    <div class="footer_menu">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#333"
            text-color="#fff"
            active-text-color="#333">
            <el-submenu index="1">
              <template slot="title"><span>SITEMAP</span></template>
              <div id="div-flex">
                <div>
                  <div>
                    <h1>关于我们</h1>
                    <router-link _blank="target" to="/about_why">公司简介</router-link>
                    <router-link to="/complicance">合规监管</router-link>
                    <router-link to="/advantages">我们的优势</router-link>
                  </div>
                  <div>
                    <h1>我们的平台</h1>
                    <router-link to="/pc">桌面版MT4</router-link>
                    <router-link to="/mobile">移动版MT4</router-link>
                  </div>
                  <div>
                    <h1>入市须知</h1>
                    <router-link to="/notice">开户须知</router-link>
                    <router-link to="/withdraw">出入金流程</router-link>
                  </div>
                  <div>
                    <h1>市场活动</h1>
                    <router-link to="/activity">优惠与活动</router-link>
                    <a href="javascript:;"></a>
                  </div>
                </div>
                <div>
                  <div>
                    <h1>交易指南</h1>
                    <router-link to="/guidelist">外汇基础知识</router-link>
                    <router-link to="/advantage">外汇交易优势</router-link>
                    <a href="javascript:;">外汇交易指南</a>
                    <router-link to="/basicanalysis">外汇基本分析</router-link>
                    <router-link to="/FXGlossary">外汇词汇</router-link>
                    <router-link to="/faq">常见问题</router-link>
                  </div>
                  <div>
                    <h1>合作伙伴</h1>
                    <router-link to="/partner">我们的合作优势</router-link>
                    <router-link to="/ib">IB经纪商计划</router-link>
                    <router-link to="/organization">机构合作方案</router-link>
                  </div>
                </div>
              </div>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="footer_text">
      <p>高风险投资警告：市场有风险，投资需谨慎。金融市场的保证金交易存在较高风险，未必适合所有投资者，增大杠杆意味着高风险与高收益并存。您需要知晓金融市场的保证金交易具有全部或者部分亏损的可能。在您决定交易之前，必须确认投资目标、投资经验及风险承受能力，并且选择适合自己的投资方式。请确保您完全理解所涉及的风险，如果有必要请寻求独立财务顾问寻求建议。</p>
      <p>igh risk investment warns: the market is risky, and the investment needs to be cautious. There is a high risk in the margin trading of the financial market, which is not necessarily suitable for all investors. The increase of leverage means that high risk and high profit coexist. You need to know that the margin transaction in the financial market has the possibility of a total or partial loss. Before you decide the transaction, you must identify the investment goals, the investment experience and the risk tolerance, and choose the appropriate way of investing. Please make sure that you fully understand the risks involved and, if necessary, seek an independent financial adviser for advice.</p>
    </div>
  </footer>
</template>

<script type="text/ecmascript-6">
  export default {
    methods: {
      handleOpen(key, keyPath) {
//        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
//        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  footer
    width:100%
    background: #1e1e1e
    .footer_menu
      height: 30px
      background: #333
      .el-menu
        border-right:solid 0 #fff
        text-align: center
        background: #333
        font-size: 10px
        > #div-flex
          display: flex
          padding: 25px 70px 0 75px
          box-sizing: border-box
          > div
              flex: 1
              > div
                text-align: left
                margin-top:38.5px
                > h1
                  font-size: 14px
                  color: #fff
                  font-weight: bold
                > a
                  display:block
                  margin-top: 20px
                  color: #999999
                  font-size: 12px
              > div:nth-child(1)
                  margin-top:0
          > div:nth-child(1)
              flex:1.6
    .footer_text
      clear: both
      width: 100%
      padding: 18px
      box-sizing: border-box
      background: #1e1e1e
      p
        font-size: 8px
        color: #999
        text-align: center
</style>
